<template>
   <div class="wrapper top">
       <div class="container">
           <div class="left">
               <div class="img-box">
                   <img :src="this.data.url" alt="">
               </div>
               <div class="item-body">
                   <div class="title">{{this.data.name}}</div>
                   <p class="style">
                       <span>{{this.data.work}}</span>
                       <span>设计经验：{{this.data.years}}年</span>
                   </p>
                   <p class="style">
                       <span>设计作品：{{this.data.work_number}}</span>
                       <span>签约单数：{{this.data.sale_number}}</span>
                   </p>
                   <p class="style line">
                       <span>擅长设计领域：{{this.data.filed}}</span>
                       <span>擅长设计风格：{{this.data.style}}</span>
                   </p>
                   <p class="style summary">
                       {{this.data.title}}
                   </p>
               </div>
               
           </div>
           <left-form></left-form>

       </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'
// import LeftForm from './../../NewsList/components/Form.vue'
import LeftForm from './Form.vue'

export default {
  name: 'design-top',
  components:{
      LeftForm,
      
  },
  props:{
      data:Object
  },
  data () {
    return {
      msg: 'index',
        litter:[]
    }
  },
   computed:{
        ...mapState(['baseUrl'])
    },
     watch:{
    data(){
        console.log(this.data)
         if(this.data.img_url!=null){
                    this.url = this.data.img_url.url
                    // console.log(this.url)
                    this.data['url'] = this.url
                }
    }
  },
  mounted() {
    //   this.getInfo()
    
  },
 methods:{
      
 }
  
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"
img 
    width 100%
.container
  container()  
  overflow hidden
.top
    margin-top 50px
.left
    float left 
    width 910px
    height 300px
    overflow hidden  
    background white
.img-box 
    width 226px
    height 280px
    // background black
    margin 10px
    float left
    overflow hidden
.item-body 
    float right
    width 650px
    margin 15px 10px 15px 0
    .title 
        font-size 18px 
        color #3d4c51
.style
    margin-top 19px
    font-size 12px 
    color #666666
.style>span+span 
    margin-left 50px
.line 
    padding-bottom 20px
    border-bottom 1px solid #00a6ba
.summary 
    text-overflow:ellipsis;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:5;
</style>
